<template>
  <div class="palette-header">
    <el-col :span="12">
      <router-link v-if="!hideLogo" to="/home">
        <div class="palette-header-logo"></div>
        <div class="palette-header-name">Mand Mobile <span>Palette</span></div>
        <div class="palette-header-version">{{ version }}</div>
      </router-link>
      &nbsp;
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <div class="palette-header-github palette-header-operater">
          <a href="https://github.com/mand-mobile/palette" target="_blank"></a>
        </div>
        <div class="palette-header-lang palette-header-operater" @click="changeLang">
          <div class="operater-select">
            <span>{{ switchLang }}</span>
          </div>
        </div>
        <div class="palette-header-lang palette-header-operater">
          <div class="operater-select">
            <a href="https://mand-mobile.github.io/1x-palette" target="_blank">1.x</a>
          </div>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
import { Header } from 'element-ui'
import { localStore } from '../utils'

export default {
  name: 'palette-header',
  components: {
    [Header.name]: Header
  },
  props: {
    hideLogo: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      version: process.env.version
    }
  },
  computed: {
    switchLang () {
      return this.$i18n.locale === 'zh' ? 'English' : '中文'
    }
  },
  mounted () {
  },
  methods: {
    changeLang () {
      const lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
      this.$i18n.locale = lang
      localStore('MAND_MOBILE_PALETTE', lang)
    }
  }
}
</script>

<style lang="stylus">
.palette-header
  min-width 1000px
  overflow hidden
  .palette-header-logo
    float left
    width 30px
    height 30px
    margin 15px 0
    background url(//manhattan.didistatic.com/static/manhattan/do1_KC5q8Qqsz8BnUPAsJY5i) no-repeat
    background-size contain
  .palette-header-name
    float left
    margin-left 10px
    font-family DINPro-Medium, DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
    font-size 20px
    line-height 60px
    color #333
    span
      color #048efa
      // font-style italic
  .palette-header-version
    float left
    margin-left 5px
    margin-top -2px
    padding 2px 5px
    font-size 12px
    font-weight 500
    color #FFF
    background #ccc
    border-bottom-left-radius 5px
    border-bottom-right-radius 5px
    transform scale(0.8)
  .palette-header-operater
    position relative
    float right
    width 80px
    height 30px
    margin-left 10px
    margin-top 17px
    line-height 30px
    text-align center
    border-radius 30px
    border solid 1px #ddd
    cursor pointer
    transition all .3s
    .operater-select, .operater-select a
      font-size 12px
      color #048EFA
      text-decoration none
    &:hover
      opacity .5
    &.palette-header-github
      width 30px
      border none
      border-radius 0
      opacity .8
      a
        display inline-block
        width 100%
        height 100%
        background url('../assets/github.png') no-repeat
        background-size contain
        -webkit-filter invert(70%)
        filter invert(70%)
      &:hover
        opacity .5
</style>
